import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Menu, X, Globe, Map, BookOpen, Settings, User } from 'lucide-react';

export interface NavItem {
  id: string;
  label: string;
  icon: React.ReactNode;
  path: string;
}

export interface NavbarProps {
  logo?: React.ReactNode;
  items: NavItem[];
  onItemClick?: (id: string) => void;
}

const Navbar: React.FC<NavbarProps> = ({ 
  logo, 
  items, 
  onItemClick 
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [activeItem, setActiveItem] = useState<string | null>(null);

  const handleItemClick = (id: string, path: string) => {
    setActiveItem(id);
    if (onItemClick) {
      onItemClick(id);
    }
    setIsOpen(false);
  };

  return (
    <nav className="navbar bg-white border-b border-gray-200 shadow-sm fixed w-full top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <div className="flex-shrink-0 flex items-center">
            {logo ? logo : (
              <span className="text-xl font-bold text-blue-600">多语言旅行助手</span>
            )}
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex space-x-8">
            {items.map((item) => (
              <Link
                key={item.id}
                to={item.path}
                className={`flex items-center space-x-2 px-1 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${activeItem === item.id ? 'text-blue-600' : 'text-gray-600 hover:text-blue-500'}`}
                onClick={() => handleItemClick(item.id, item.path)}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
            ))}
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            <button
              type="button"
              className="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
              onClick={() => setIsOpen(!isOpen)}
            >
              {isOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Navigation */}
      {isOpen && (
        <div className="md:hidden bg-white border-t border-gray-200">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {items.map((item) => (
              <Link
                key={item.id}
                to={item.path}
                className={`block flex items-center space-x-3 px-3 py-2 rounded-md text-base font-medium ${activeItem === item.id ? 'bg-blue-50 text-blue-600' : 'text-gray-600 hover:bg-gray-50 hover:text-blue-500'}`}
                onClick={() => handleItemClick(item.id, item.path)}
              >
                {item.icon}
                <span>{item.label}</span>
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;